<template>
  <a-card
    :bordered="false"
    title="应用中心"
    style="min-height:95%;"
    :bodyStyle="{padding:'20px 0 20px 6px'}"
  >
    <div class="flex">
      <div class="child" v-for="(item,index) in list" :key="index" @click="routerPath(item)">
        <div class="left">
          <img
            :src="item.loge"
            alt
          />
        </div>
        <div class="right">
          <h2 class="title">
            <b>{{item.name}}</b>
          </h2>
          <div
            class="desc"
          >{{item.intro}}</div>
        </div>
      </div>

     <!--<div class="child" @click="$router.push({name:'customFormList'})">
        <div class="left">
          <img
            src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=801998620,1908501958&fm=26&gp=0.jpg"
            alt
          />
        </div>
        <div class="right">
          <h2 class="title">
            <b>自定义表单</b>
          </h2>
          <div class="desc">灵活使用自定义表单、快速获取信息</div>
        </div>
      </div> -->
    </div>
  </a-card>
</template>

<script>
import { appCenterList } from '@/api/lives'
export default {
  created() {
    this.getList()
  },
  data() {
    return {
      list: [],
    }
  },
  methods: {
    getList() {
      appCenterList({ school_id: this.$store.state.user.school}).then((res) => {
        this.list = res
      })
    },
    routerPath(data){
      if(data&&data.key){
        if(data.key=='Live'){
          //云课堂
          this.$router.push({name:'courseList'})
        }else if(data.key=='AttendFace'){
          //人脸
          this.$router.push({name:'faceList'})
        }else if(data.key=='AttendCard'){
          //打卡
          this.$router.push({name:'cardClockIn'})
        }else if(data.key=='Form'){
          //表单
          this.$router.push({name:'customForm'})
        }else if(data.key=='WebSite'){
            this.$router.push({name:'OfficialWebsite'})
        }else if(data.key=='Salary'){
            this.$router.push({name:'wage_settlement'})
        }
      }
    },
    
  },
}
</script>

<style lang="less" scoped>
.flex {
  display: flex;
  flex-wrap: wrap;
  .child {
    background: #fff;
    width: 400px;
    height: 106px;
    border: 1px solid #eee;
    border-radius: 4px;
    margin: 0 10px;
    margin-bottom: 20px;
    padding: 21px 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
    position: relative;
    .left {
      width: 62px;
      height: 62px;
      margin-right: 14px;
      border-radius: 50%;
      overflow: hidden;
      text-align: center;
      object-fit: cover;
      img {
        width: 100%;
        height: auto;
      }
    }
    .right {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      .title {
        margin-right: 35px;
        color: #333;
        line-height: 26px;
        margin-bottom: 15px;
      }
      .desc {
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
  .child:hover {
    border-color: #1890ff;
    background-color: #e6f7ff;
  }
}
</style>